{extend name='mycss/base'/}
{block name="style"}
<style>

    /*badge的生成*/
    .badge {
        display: inline-block;
        min-width: 10px;
        padding: 3px 7px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        background-color: #777;
        border-radius: 10px;
    }

    /*所有父元素为.list-group-item的badge漂浮到右边*/
    .list-group-item > .badge {
        float: right;
    }

    /*所有父元素为.list-group-item的badge漂浮到右边*/
    .list-group-item > .badge {
        float: right;
    }


    /*--------------------list的使用------------------------------------*/

    .list-group{
        margin-top: 20px;
    }
    .list-group-item:first-child {
        /*第一个元素左右添加圆角*/
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .list-group-item {
        position: relative;
        display: block;
        padding: 10px 15px;
        margin-bottom: -1px;
        /*背景颜色及边框*/
        background-color: #fff;
        border: 1px solid #ddd;
    }

    /*当list-group-item状态 focus、hover时，改变字体颜色 背景颜色*/
    /*当list-group-item同时设置了为disabled 改变字体颜色 背景颜色*/
    .list-group-item.disabled, .list-group-item.disabled:focus, .list-group-item.disabled:hover {
        color: #777;
        cursor: not-allowed;
        background-color: #eee;
    }

    a {
        color: #337ab7;
        /*去掉超链接提示下划线*/
        text-decoration: none;
    }

    a:focus, a:hover {
        color: #23527c;
        text-decoration: underline;
    }

    a.list-group-item, button.list-group-item {
        color: #555;
    }
    a.list-group-item:focus, a.list-group-item:hover, button.list-group-item:focus, button.list-group-item:hover {
        color: #555;
        text-decoration: none;
        background-color: #f5f5f5;
    }

    button.list-group-item {
        /*默认宽度为包裹文字*/
        width: 100%;
        /*默认文字居中*/
        text-align: left;
    }
</style>
{/block}
{block name="main"}

<!--
    ul的li组合中 li会自动缩进
    li没有焦点变色，li无法获取焦点
-->
<ul class="list-group">
    <li class="list-group-item">Cras justo odio <span class="badge">14</span></li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item disabled">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
    <li class="disabled">Morbi leo risus</li>
</ul>
<!--
div+a组合不会缩进，需要去掉a的样式
有焦点变色
-->
<div class="list-group">
    <a href="#" class="list-group-item active">
        Cras justo odio
    </a>
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item">Morbi leo risus</a>
    <a href="#" class="list-group-item">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>



<!--列表组中的元素也可以直接就是按钮（也同时意味着父元素必须是 <div> 而不能用 <ul> 了），并且无需为每个按钮单独包裹一个父元素。注意不要使用标准的 .btn 类！-->

<div class="list-group">
    <button type="button" class="list-group-item">Cras justo odio</button>
    <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
    <button type="button" class="list-group-item">Morbi leo risus</button>
    <button type="button" class="list-group-item">Porta ac consectetur ac</button>
    <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>


{/block}